<html>
  <head>
    <title>Hello World</title>
    <style>
      body {
        background-image: linear-gradient(45deg, #EAD790 0%, #EF8C53 100%);
        text-align: center;
      }

      button {
        background: rgba(0,0,0,0.40);
        box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.50);
        border-radius: 8px;
        color: white;
        padding: 1em 2em;
        border: none;
        font-family: 'Roboto', sans-serif;
        font-weight: 300;
        font-size: 14pt;
        position: relative;
        top: 40%;
        cursor: pointer;
        outline: none;
      }

      button:hover {
        background: rgba(0,0,0,0.30);
      }
    </style>
    <link href='https://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css' />
    <script>
      function sayHello () {
        alert('Hello World');
      }
    </script>
  </head>
  <body>
    <button onclick="sayHello()">Say Hello</button>
  </body>
</html>
